import React, { PureComponent } from 'react';
import { Align, VAlign } from '../Common';
import BaseNode from './BaseNode';

import styles from './index.less';

class TextNode extends PureComponent {
  render() {
    const { data, isSelected, onNodeClick } = this.props;
    const {
      // name,
      caption,
      showCaption,
      // isPageNumber,
      value,
      position,
      size,
      textStyle: { font, align, valign, margins },
    } = data;
    return (
      <BaseNode size={size} position={position} onNodeClick={onNodeClick}>
        <div
          style={{
            ...margins,
            fontSize: font.size,
            justifyContent: Align[align],
            alignItems: VAlign[valign],
            border: isSelected ? '1px dashed gainsboro' : '',
            backgroundColor: isSelected ? 'rgba(248, 241, 241, 0.466)' : '',
            color: isSelected ? 'red' : 'black',
          }}
          className={styles.textNode}
        >
          {showCaption ? `${caption}:${value}` : value}
        </div>
      </BaseNode>
    );
  }
}

export default TextNode;
